let drawHtml = `
    <div class="drawer">
        <el-row type="flex" v-for="j in 2" :key="j" justify="center">
            <el-col v-for="i in 4" :key="i" :span="5"><div class="grid-content bg-purple">
                <!-- <a href="index.html?page=1"> -->
                    <a class="productItem" href="detail.html">
                        <el-image src="./img/compute.png"></el-image>
                        <div class="describe alignCenter">MAX N95 <span class="block">Intel® Alder Lake-N95 Processor</span></div>
                    </a>
                    <!-- </a> -->
            </div></el-col>
        </el-row>
    </div>
`
Vue.component('my-drawer', {
    props: ['title', 'content'],
    template: drawHtml,
    data(){
      return{
      }
    },
    mounted(){
      
    },
    methods:{
      
    }
  });

  // 创建style元素
const drawerStyle = document.createElement('style');
 
// 设置style内容
drawerStyle.innerHTML = `
 .drawer{padding:0 4%;box-sizing:border-box;position: fixed;z-index: 10;left: 0;width: 100%;top: -100%;display: none;transition:all 0.5s;width:100%;background: #f3f3f3;justify-content:space-around;}
  .drawer>div{width: 25%;height: 300px;}        
  .drawer .grid-content{display: flex;justify-content: center;align-items: center;height: 100%;flex-direction: column;color: #292929;}
  .drawer .grid-content .describe{margin-top: 20px;}
  .drawer .grid-content span{color:#757575;margin-top: 10px;}
  .productItem:hover .el-image{transform:scale(1.1);transition:all 0.6s}
  @media screen and (max-width: 1440px) {
    .drawer>div {
        height:200px;
        .el-image{width:100px}
         .grid-content .describe{margin-top: 10px;}
    }
  }
`;
 
// 将style元素添加到head中
document.head.appendChild(drawerStyle);
  